import { Button, Modal, Form, Input } from 'antd';

const App = ({
  form,
  isUpdate,
  updateFlag,
  tabKey,
  get,
  isModalVisible,
  openDoor,
  closeDoor,
  updata,
}) => {
  const showModal = () => {
    openDoor();
    updateFlag();
  };

  const handleOk = async () => {
    const res = await form.validateFields();

    isUpdate !== -1 ? updata(res) : get(res);

    form.resetFields();
    closeDoor();
  };

  const handleCancel = () => {
    closeDoor();
    form.resetFields();
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Add a row
      </Button>
      <Modal
        title="添加"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
      >
        <Form
          form={form}
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          initialValues={{
            remember: true,
          }}
          autoComplete="off"
        >
          <Form.Item
            label="name"
            name="name"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item label="age" name="age">
            <Input />
          </Form.Item>
          {Number(tabKey) ? (
            <Form.Item label="email" name="email">
              <Input.Password />
            </Form.Item>
          ) : (
            <Form.Item label="address" name="address">
              <Input />
            </Form.Item>
          )}
        </Form>
      </Modal>
    </>
  );
};

export default App;
